// pages/DetailsPage/DetailsPage.js
import Toast from '@vant/weapp/toast/toast';
const app = getApp()
Page({
 data: {
  // 轮播图片
  slideImages: [],
  // 页面详细图片
  detailImages: [],
  // 商品详细数据
  detailedData: [],
  // 新老顾客 ...
  promoteDesc: '',
  // 折扣
  promoteDiscount: 0,
  // 轮播当前页数
  page: 0,
  // 控制弹出层显示隐藏
  show: false,
  // 控制选中状态
  curActive: -1,
  // 弹出层商品数量
  quantity: 1,
  // 默认禁用数量选项
  quantityDisable: true,
  // 控制商品详情 选中或未选中商品
  select: true,
  // 购物车内商品的数量
  productsNum: 0,
  // 商品颜色选中状态
  colorActive: '',
  // 选中的商品尺寸
  selectSize: '',
  // 选中商品颜色
  selectColor: ''
 },
 // 生命周期函数--监听页面加载
 onLoad(options) {
  // loading
  wx.showLoading({
   title: '加载中...',
  })
  let { itemColorCode } = options
  // console.log(options);
  this.getDeailsPage(itemColorCode)
 },
 // 商品详情页请求
 getDeailsPage(itemColorCode) {
  wx.request({
   url: `https://starmid.minutestars.com/api/product4color/GetProductByItemColorCode/v1.1/?itemColorCode=${itemColorCode}`,
   success: (res) => {
    let { Result, Data, detailImages, slideImages, promoteDiscount, promoteDesc } = res.data
    Data.WholeDetailHtml = Data.WholeDetailHtml.replace(/view*/gi, 'div').replace(/rpx/gi, 'px').replace(/font-size:28px/gi, 'font-size:12px')
    if (Result.Success) {
     promoteDiscount = Math.fround(Data.price * 0.7).toFixed(2)
     this.setData({
      detailedData: Data,
      detailImages,
      slideImages,
      promoteDiscount,
      promoteDesc
     })
     wx.setNavigationBarTitle({
      title: Data.productName,
     })
     wx.hideLoading()
    }
   }
  })
 },
 // 获取当前轮播页数
 getIndex(event) {
  this.setData({ page: event.detail.current })
 },
 // 回首页
 goHome() {
  wx.navigateBack({
   delta: 999,
  })
 },
 // 显示弹出层
 sheetShow() {
  this.setData({ show: this.data.show = true })
 },
 // 关闭弹出层
 closeSheet() {
  this.setData({ show: this.data.show = false })
 },
 // 尺寸 选中状态
 sizeActive(event) {
  let { productsize } = event.target.dataset
  this.setData({
   curActive: event.target.dataset.index,
   quantityDisable: this.data.quantityDisable = false,
   selectSize: this.data.selectSize = productsize,
   select: this.data.select = false
  })
 },
 // 选中颜色
 addColor(event) {
  // console.log(event);
  this.setData({ colorActive: this.data.colorActive = 'active', selectColor: event.target.dataset.selectcolor })
 },
 // 商品数量增加
 addQuantity() {
  this.setData({ quantity: this.data.quantity + 1 })
 },
 // 商品数量减少
 removeQuantity() {
  this.setData({ quantity: this.data.quantity - 1 })
 },
 // 加入购物车
 addShopping() {
  // 判断控制弹出层的变量是否为 true
  if (this.data.show) {
   // 为true则执行加入购物车
   if (!(this.data.selectSize && this.data.selectColor)) return Toast('请选择属性')
   // 循环遍历当前加入购物车的商品是否已存在 返回值为布尔值
   const exist = app.globalData.shopping.some(item => item.size === this.data.selectSize && item.productId === this.data.detailedData.productId)
   if (exist) {
    // 已存在只让已存在的商品数量增加
    let qty = app.globalData.shopping.find(item => item.productId === this.data.detailedData.productId)
    qty.qty += this.data.quantity
   } else {
    // 不存在则执行加入购物车操作
    app.globalData.shopping.push({
     "productId": this.data.detailedData.productId,
     "itemColorCode": this.data.detailedData.ItemColorCode,
     "itemSkuCode": this.data.detailedData.ItemColorCode + this.data.selectSize,
     "qty": this.data.quantity,
     "price": this.data.detailedData.price,
     "promoteDiscount": this.data.promoteDiscount,
     "color": this.data.selectColor,
     "size": this.data.selectSize,
     "imgUrl": this.data.detailedData.displaySmallImg,
     "productName": this.data.detailedData.productName,
     "isShow": true
    })
   }
   // 加入购物车后执行获取购物车内数量的函数
   app.getProductsNum()
   // 获取的最新的商品属性给 productsNum
   this.setData({ productsNum: app.globalData.productsNum })
   // 1.将弹出层关闭
   // 2.清空选中的商品信息
   // 3.清除尺寸、颜色选中状态
   this.setData({
    selectSize: '',
    selectColor: '',
    select: this.data.select = true,
    show: this.data.show = false,
    curActive: this.data.curActive = -1,
    colorActive: this.data.colorActive = ''
   })
   Toast('添加购物车成功')
  } else {
   this.sheetShow()
  }
 },
 // 页面显示
 onShow() {
  app.getProductsNum()
  // 每次进入页面获取购物车内的商品数量
  this.setData({ productsNum: app.globalData.productsNum })
 },
 // 跳转到购物车
 goShopping() {
  wx.switchTab({
   url: '../shoppingBag/shoppingBag',
  })
 }
})